<template>
	<view class="box">
		<view class="hander" v-if="!iSshow">
			<view
				style="width: 5rem;height: 5rem;border-radius: 50%;margin: 20px auto;border: 1px solid #fff;background-color: #ccc;text-align: center;display: flex;justify-content: center;align-items: center;">
				<u-icon name="account-fill" color="#82848a" size="50"></u-icon>
			</view>
			<view class="" style="color: #fff;font-weight: 600;" @click="handlelogin">
				去登录>
			</view>
		</view>
		<view class="hander" v-else>
			<image style="width: 5rem;height: 5rem;border-radius: 50%;margin: 20px auto;border: 1px solid #fff;"
				:src="avatarUrl" shape="circle"></image>
			<view class="" style="color: #fff;">
				<view class="" style="text-align: center;">
					北冥神功
				</view>
				<view class="" style="text-align: center;">
					ID:1234567
				</view>
			</view>
		</view>
		<u-cell-group>

			<u-cell icon="account-fill" title="身份等级" :value="valueMy"></u-cell>
			<u-cell title="答题记录" isLink @click="shengpijilu"></u-cell>
			<u-cell title="审核记录" isLink @click="sshhe"></u-cell>
		</u-cell-group>
		<u-modal :show="show" @cancel="show = false" @confirm="confirm" ref="uModal" :showCancelButton="true"
			confirmText='登录'>
			<view class="login-container">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" :src="avatarUrl" mode="scaleToFill"></image>
				</button>
				<view class="input-item">
					<view class="input-label">昵称</view>
					<view class="input-wrap">
						<input type="nickname" placeholder="请输入昵称" @blur="handleBlur" />
					</view>
				</view>
				<view class="input-item">
					<view class="input-label">电话</view>
					<view class="input-wrap">
						<input type="number" placeholder="请输入电话" @blur="handleBlur1" />
					</view>
				</view>

			</view>
		</u-modal>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../utils/config.js';
	export default {
		data() {
			return {
				show: false,
				nickName: "",
				phonenumber: "",
				avatar: "",
				avatarUrl: "",
				iSshow: false,
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				toIdentityLable: "",
				valueMy:""
			}
		},

		methods: {
			shengpijilu(){
				if (!uni.getStorageSync('ykt_userId')) {
					this.$refs.uToast.show({
						type: 'default',
						message: "去登录",
					})

					return
				}
				uni.navigateTo({
					url: "/pages/my/dtju"
				});
			},
			sshhe(){
				if (!uni.getStorageSync('ykt_userId')) {
					this.$refs.uToast.show({
						type: 'default',
						message: "去登录",
					})

					return
				}
				uni.navigateTo({
					url: "/pages/my/shenhe"
				});
			},
			handlelogin() {
				this.show = true;
			},
			confirm() {

				// 校验昵称
				if (!this.nickName) {

					return;
				}
				if (!this.phonenumber) {

					return;
				}
				const that = this;
				const userInfo = {
					nickName: that.nickName,
					avatarUrl: that.avatarUrl,
					phonenumber: that.phonenumber,
					avatar: that.avatar
				};
				// 本地存储用户信息
				uni.setStorageSync('ykt_userInfo', userInfo);
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				// 登录
				uni.login({
					success(loginRes) {
						const code = loginRes.code;
						uni.request({
							url: `${baseUrl}/wechat/login`,
							method: 'POST',
							data: {
								code,
								nickName: that.nickName,
								phonenumber: that.phonenumber,
								avatar: that.avatar
							},
							success(res) {
								console.log(res.data.data)
								// 本地存储userId作为token
								uni.setStorageSync('ykt_userId', res.data.data.userId);
								uni.setStorageSync('ykt_openId', res.data.data.openId)
								uni.setStorageSync('identityLable', res.data.data.identityLable);
								uni.setStorageSync('toIdentityLable', res.data.data.toIdentityLable ? res.data.data
									.toIdentityLable : "max");
									that.valueMy=res.data.data.identityLable
								that.show = false;
								that.iSshow = true
								uni.hideLoading()
								that.$refs.uToast.show({
									type: 'default',
									message: "登录成功",
								})
							},
							fail(err) {
								uni.hideLoading()
								that.$refs.uToast.show({
									type: 'default',
									message: "登录失败",
								})
							}
						});
					},
					// 登陆后
					fail(err) {
						uni.hideLoading()
						that.$refs.uToast.show({
							type: 'default',
							message: "登录失败",
						})

					}
				});
			},
			handleBlur(e) {
				const {
					value
				} = e.detail;
				this.nickName = value;
			},
			handleBlur1(e) {
				// const { value } = e.detail;
				this.phonenumber = e.detail.value;
			},
			/**
			 * 选择头像
			 */
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail;
				this.avatar = avatarUrl;
				this.avatarUrl = avatarUrl
			}
		}
	}
</script>
<style scoped lang="scss">
	.box {
		height: 100vh;

		.hander {
			height: 30%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-position: center center;
			background: url(../../static/bg.png);
			background-size: 100% 100%;

		}
	}

	.login-container {
		position: relative;
		min-height: 25vh;

		.avatar-wrapper {
			// margin: 200rpx auto 60rpx;
			padding: 0;
			width: 140rpx;
			height: 140rpx;

			.avatar {
				width: 100%;
				height: 100%;
			}

			&::after {
				border: 0;
			}
		}

		.input-item {
			display: flex;
			padding: 10rpx;
			margin-top: 1rem;
			margin-bottom: 1rem;
			border-top: 2rpx solid #eee;
			border-bottom: 2rpx solid #eee;
			font-size: 14px;

			.input-label {
				margin-right: 30rpx;
			}

			.input-wrap {
				flex: 1;
				text-align: left;
				width: 100px;
			}
		}

		.login-btn {

			padding: 20rpx 30rpx;
			box-sizing: border-box;
			text-align: center;
			color: #fff;
			background-color: #766ED7;
			border-radius: 10rpx;
			margin-top: 1rem;
		}

		.handlegb {
			width: 2rem;
			height: 2rem;
			position: absolute;
			bottom: -60px;
			left: 50%;
			margin-left: -1rem;
		}
	}
</style>